PPT 真的过时了:Markdown 到可交互 HTML 的演示革命

363 字

极客工具 2026年6月6日 16:05

每次开会前,你是不是也这样?

打开 PPT,开始纠结:这一页用什么配色?这个图标要不要换?字体大小调成 24 还是 26?动画用「飞入」还是「淡出」?

一两个小时就这么没了。

排版花了半天,内容反而没仔细想。

这不是你的问题。这是工具设计范式的错。


01 演示的本质:内容,不是格式

我们来做一次思维实验。

如果 PPT 从来不存在,你会怎么准备一场演讲?

大概率是: 先写内容,提炼观点,整理逻辑框架 。这些用纯文本就能完成,甚至更高效。

PPT 之所以存在,是因为它解决了「展示」的问题——把文字变成视觉结构,让观众更容易接收。

但问题来了: PPT 把「写」和「展示」耦合在同一个工具里 。这意味着你在写的每一个瞬间,都在同时思考内容 AND 外观。

两件事同时做,每件都做不好。


02 旧范式:PPT 工作流的结构性缺陷

传统 PPT 工作流的问题,不是个别技巧问题,而是 架构性缺陷

❌ 内容与格式耦合

你在写「第三点很重要」的时候,脑子里同时在想:要不要加个红色箭头强调一下?背景要不要换个渐变?

格式侵入写作,注意力被切碎。

❌ 协作成本极高

三个人改一份 PPT:版本混乱、格式不统一、最后由一个人统一合并——这个过程消耗的精力,往往比内容本身还多。

❌ 交付物是文件,不是链接

PPT 发出去是一堆 .pptx 文件,收到的人要么装软件打开,要么看截图。没有交互,没有动画(除非你录制),没有响应式。

演示的本质是传达观点,不是提交一份排版作业。


03 新范式:Markdown 写,AI 渲染

现在,有了新选择。

核心思路很简单: 让写作工具专注写作,让渲染工具专注渲染。

Markdown(内容)  →  AI 渲染引擎  →  可交互 HTML Slides

怎么工作的?

第一步:用 Markdown 写内容

不用关心字体、颜色、动画。你只需要写:

# 智能体平台的架构设计

## 1. 核心理念
- 知识库是壁垒
- Skill 是原子化能力单元
- MCP 是连接协议

## 2. 技术选型
| 场景 | 技术 |
|------|------|
| 检索 | ES + Vector |
| 调用 | MCP Protocol |
| 编排 | Agentic Loop |

第二步:AI 渲染成 HTML

把上面的 Markdown 扔给 html-it 或 html-anything 这样的工具,AI 自动生成:

  • • 符合阅读节奏的分页结构
  • • 协调的配色和排版
  • • 代码高亮、表格、图表
  • • 键盘导航的 Slide 体验
  • • 可分享的链接(不是文件)

整个过程,你只写了一件事:内容。


04 为什么 HTML Slides 碾压 PPT

这不是主观偏好,是工具能力的结构性差异:

维度 PPT HTML Slides
写作体验 格式侵入 纯文本优先
分享方式 文件/截图 链接
交互能力 静态 可折叠/可点击/可过滤
响应式 需要手动适配 自动适配全设备
版本控制 二进制文件,难 纯文本,易
AI 集成 原生
渲染质量 依赖设计师 AI 自动设计

尤其最后一条: AI 集成

当你让 LLM 直接读 Markdown 输出 HTML 时,它能做 PPT 完全做不到的事—— 根据内容语义,自动决定哪些信息应该突出、哪些应该折叠、如何用颜色编码信息层级。

这不是辅助设计,这是设计自动化。


05 工具链:这些开源项目值得关注

html-it —— 源自一篇 viral 博客的 skill

最初的起源,是一位 Claude 工程师 thariqs 写的博客文章 The unreasonable effectiveness of HTML [1]

这篇文章的核心观点很简单: Markdown 是写作者之间的中间格式,而 HTML 才是最终给人类阅读的形式。 它用 20+ 个真实案例(slides、flowchart、annotated diff、design system)证明,只要给 AI 正确的约束,HTML 的输出质量远超预期。

OpenClaw 的 html-it skill 就是这套方法的封装:输入 Markdown 或数据,输出单文件 HTML 报告/幻灯片/仪表盘,无需 API key,设计系统内置。

html-anything —— open-design 生态的核心编辑器

来自 nexu-io/open-design 团队(40k ⭐ · 200+ 贡献者), 6.2k ⭐ ,定位是 agent时代的 HTML 编辑器

核心思路和 html-it 一脉相承,但更进一步:

  • 零 API key — 复用你本地已有的 Claude Code / Cursor / Codex / Gemini CLI 会话,不额外收费
  • 一键导出 — 微信/X/知乎/下载.html/.png,无需二次排版
  • SSE 流式渲染 — AI 生成过程实时可见,随时可打断重生成

两者关系

html-it 和 html-anything 都站在同一个思想基础上: Markdown 是草稿,HTML 才是人类最终阅读的形式。 区别在于:

  • html-it — 更轻量,skill 形式,OpenClaw 内置,适合快速输出报告/幻灯片
  • html-anything — 更完整,Web 应用,适合需要多 skill 对比、一键多平台分发的场景

06 范式转移的深层意义

工具的变化只是表象。真正发生的是: 从「人配合工具」到「工具配合人」的转变。

PPT 时代,工具定义了工作的边界。你只能在它允许的范围内表达。超纲了?要么妥协,要么花大量时间 hack。

AI 时代,这个关系反过来了。

人负责思考和表达,AI 负责呈现和分发。

这不是偷懒,这是认知分工的进化。把大脑的带宽留给真正重要的事——观点、逻辑、洞察——而不是字体大小和箭头颜色。


07 写在最后

PPT 不会完全消失。有些场景(投标、正式汇报)它仍然是标准格式,这点要承认。

但对于 日常的技术分享、知识传递、团队内训 ——这些占了大多数的场景,HTML Slides 已经碾压 PPT 了。

更重要的是,这个转变背后的逻辑: 内容优先,格式次之 ——其实是一种更好的工作思维方式。

先想清楚你要说什么,再想怎么说。

Markdown 帮你强制做到了这一点。剩下的,交给 AI。


参考链接:

  • • The unreasonable effectiveness of HTML [1] — thariqs,HTML 作为 AI 输出格式的 viral 文章
  • • html-anything [2] — nexu-io,6.2k ⭐,agentic HTML 编辑器
  • • open-design [3] — 40k ⭐,设计系统 + agent 集成基础设施

引用链接

[1] The unreasonable effectiveness of HTML: https://thariqs.github.io/html-effectiveness/
[2] html-anything: https://github.com/nexu-io/html-anything
[3] open-design: https://github.com/nexu-io/open-design

前沿工具 · 目录

继续滑动看下一个

极客工具 XTool

向上滑动看下一个